import Vue from 'vue'
import VueRouter from 'vue-router'

import Layout from '../components/Layout.vue'
import Index from '../views/Index.vue'
import Login from '../views/Login.vue'

// 注册路由插件
Vue.use(VueRouter)

// 路由规则
const routes = [
  {
    name: 'Login',
    path: '/login',
    component: Login
  },
  {
    path: '/',
    component: Layout,
    children: [
      {
        path: '',
        name: 'Index',
        component: Index
      },
      {
        path: '/blog',
        name: 'Blog',
        component: () => import(/* webpackChunkName: "blog" */'../views/Blog.vue')
      },
      {
        path: '/photo',
        name: 'Photo',
        component: () => import(/* webpackChunkName: "photo" */'../views/Photo.vue')
      },
      {
        path: '/detail/:id',
        name: 'Detail',
        // 开启 props，会把 URL 中的参数传递给组件
        // 在组件中通过 props 来接收 URL 参数
        props: true,
        component: () => import(/* webpackChunkName: "detail" */'../views/Detail.vue')
      }
    ]
  },
  {
    path: '*',
    name: 'NotFound',
    component: () => import(/* webpackChunkName: "notFound" */'../views/404.vue')
  }
]

// 创建 router 对象
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router
